<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 标题 -->
      <div class="title"></div>

      <!-- 表单 -->
      <el-form ref="form" :model="user" :rules="rules">
        <el-form-item prop="uname">
          <el-input
            prefix-icon="el-icon-user"
            placeholder="请输入用户名"
            v-model="user.uname"
          ></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            type="password"
            show-password
            prefix-icon="el-icon-lock"
            placeholder="请输入密码"
            v-model="user.password"
          ></el-input>
        </el-form-item>

        <el-form-item prop="one">
          <el-input
            type="password"
            show-password
            prefix-icon="el-icon-lock"
            placeholder="请再次输入密码"
            v-model="user.one"
          ></el-input>
        </el-form-item>
        <el-button type="primary" @click="send">注册</el-button>
      </el-form>
      <el-link :underline="false" @click="$router.push('/login')">登录</el-link>
    </el-card>
  </div>
</template>

<script>
import { regAPI } from '@/api/user'
export default {
  name: 'MyReg',
  data() {
    const validatePass2 = (rule, value, callback) => {
      // rule 没什么用
      // value 表示当前输入框的值（本例中，确认密码使用这个规则，所以value表示确认密码）
      // callback() --- 表示没问题，通过；      callback(new Error('请再次输入密码')) --- 表示不通过，并设置提示信息
      // 我们要验证的就是两次密码是否一致
      if (value === this.user.password) {
        callback()
      } else {
        callback(new Error('两次密码不一致'))
      }
    }

    return {
      // 数组项
      user: {
        uname: '',
        password: '',
        one: ''
      },

      // 规则项
      rules: {
        uname: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]{3,10}$/, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        one: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
          // 验证两次密码是否一致
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },

  methods: {
    send() {
      // form 是 <el-form> 的ref属性值，必须有这个值
      this.$refs.form.validate(async valid => {
        // console.log(valid) // 验证通过valid=true;  验证不通过valid=false
        if (!valid) return // 验证不通过，则return
        // console.log('验证通过，可以提供数据了')
        const data = {
          username: this.user.uname,
          password: this.user.password,
          repassword: this.user.one
        }
        const res = await regAPI(data)
        // console.log(res)

        if (res.data.code === 0) {
          // 注册成功：提示、重置表单、跳转到登录页
          this.$message.success(res.data.message)
          this.$refs.form.resetFields() // 重置表单
          this.$router.push('/login') // 跳转到登录页
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.container {
  background: url(@/assets/images/login_bg.jpg);
  background-size: cover;
  height: 100%;
  .el-card {
    width: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    // 标题
    .title {
      height: 40px;
      background: url(@/assets/images/login_title.png) no-repeat center top;
    }
    .el-button {
      width: 100%;
    }
  }
}
</style>
